<template>
  <div class="home">
    <Banner/>
    <div class="home-content">
      <div class="column-block">
        <div class="column-list">
          <div class="column-item">
            <img src="../../../assets/image/img_14.png" alt="">
            <div class="column-title">业内顶尖矿机厂商</div>
            <div class="column-text">采用计算集群+存储集群的矿机模式矿机技术及质量保障</div>
          </div>
          <div class="column-item">
            <img src="../../../assets/image/img_2.png" alt="">
            <div class="column-title">一键购买，便捷挖矿</div>
            <div class="column-text">省去对接矿池的繁琐程序</div>
          </div>
          <div class="column-item">
            <img src="../../../assets/image/img_8.png" alt="">
            <div class="column-title">平台筛选，安心保障</div>
            <div class="column-text">认真调研，为用户筛选优质稳定的Filecoin节点</div>
          </div>
          <div class="column-item">
            <img src="../../../assets/image/img_6.png" alt="">
            <div class="column-title">减低挖矿准入门槛</div>
            <div class="column-text">小成本，低门槛，共享矿机算力收益</div>
          </div>
        </div>
      </div>
      <div class="filecoin-main">
        <div class="main-bar">
          <div class="title"><span>Filecoin</span>
            <h3>来金色算力云便捷挖矿</h3>
            <p>简化挖矿购买步骤，打包矿机筛选、部署、维护、技术服务等复杂环节</p></div>
          <div class="pro-list">
            <div class="pro-item pro-item1">
              <div class="img">
                <img alt="" src="../../../assets/image/img_10.png">
              </div>
              <p>业内顶尖矿机厂商</p></div>
            <div class="pro-item-jt">
              <img alt="" src="../../../assets/image/img_4.png">
            </div>
            <div class="pro-item pro-item2">
              <div class="img">
                <img alt="" src="../../../assets/image/img_1.png">
              </div>
              <p>从Filecoin主网上线起开始挖矿</p></div>
            <div class="pro-item-jt pro-item-jt2">
              <img alt=""
                   src="../../../assets/image/img_4.png">
            </div>
            <div class="pro-item pro-item3">
              <div class="img">
                <img alt="" src="../../../assets/image/img_13.png"></div>
              <p>矿池分配收益</p></div>
            <div class="pro-item-jt">
              <img alt="" src="../../../assets/image/img_4.png"></div>
            <div class="pro-item pro-item4">
              <div class="img">
                <img alt="" src="../../../assets/image/img_15.png"></div>
              <p>用户收到收益</p></div>
            <br style="clear:both"></div>
          <div class="process-list">
            <div class="process-list-bar">
              <div class="process-item">
                <div class="img">
                  <img alt="" src="../../../assets/image/img_7.png"></div>
                <p>购买矿机</p></div>
              <div class="process-item">
                <div class="img">
                  <img alt="" src="../../../assets/image/img_12.png"></div>
                <p>测试安装</p></div>
              <div class="process-item">
                <div class="img">
                  <img alt="" src="../../../assets/image/img_9.png"></div>
                <p>接入矿池</p></div>
              <div class="process-item">
                <div class="img">
                  <img alt="" src="../../../assets/image/img_3.png"></div>
                <p>运维管理</p></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from './Banner'

export default {
  name: 'Home',
  components: { Banner },
  data () {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.home {
  background: rgba(248, 248, 248, 1);
}

.home-content {
  position: relative;
  top: -30px;
  z-index: 1000;
  min-height: 800px;

  .column-block {
    width: 1180px;
    margin: 0 auto 0 auto;

    .column-list {
      height: 360px;
      justify-content: space-between;
      width: 1200px;
      display: flex;

      .column-item {
        height: 360px;
        background: #fff;
        box-shadow: 0 2px 20px 0 rgb(170 108 0 / 10%);
        border-radius: 6px;
        width: 280px;
        float: left;
        margin-right: 20px;
        box-sizing: border-box;
        padding: 60px 34px 0 34px;

        img {
          width: 90px;
          height: 90px;
        }

        .column-title {
          margin-top: 66px;
          font-size: 18px;
          line-height: 25px;
          color: #333;
        }

        .column-text {
          margin-top: 12px;
          font-size: 16px;
          color: #999;
          line-height: 28px;
        }
      }
    }
  }

  .filecoin-main {
    margin-top: 90px;
    background: #fff;
    text-align: center;
    padding-top: 80px;
    color: rgba(150, 148, 144, 1) !important;

    .main-bar {
      width: 1180px;
      margin: 0 auto 0 auto;

      .title {
        span {
          font-family: Helvetica-Bold;
          font-size: 14px;
          color: #f39800;
        }

        h3 {
          font-family: PingFangSC-Semibold;
          font-size: 32px;
          color: #333;
          margin: 10px 0;
        }

        p {
          font-family: PingFangSC-Regular;
          font-size: 16px;
          color: #999;
          line-height: 24px
        }
      }

      .pro-list {
        margin-top: 100px;
        height: 235px;
        display: flex;

        .pro-item {
          width: 250px;

          .img {
            width: 220px;
            margin: 0 auto;
            height: 180px;

            img {
              width: 100%;
            }
          }

          p {
            font-family: PingFangSC-Medium;
            font-size: 18px;
            color: #333;
            margin-top: 30px;
          }
        }

        .pro-item-jt {
          width: 28px;
          box-sizing: content-box;
          padding: 80px 16px 0 16px;

          img {
            width: 28px;
          }
        }
      }

      .process-list {
        margin-top: 70px;
        height: 250px;
        background: url("../../../assets/image/img_11.png");
        background-size: 100%;
        background-repeat: no-repeat;
        padding-top: 60px;

        .process-list-bar {
          width: 1080px;
          margin: 0 auto;
          display: flex;

          .process-item {
            width: 25%;

            p {
              font-size: 18px;
              color: #333;
              margin-top: 20px;
            }

            img {
              width: 140px;
              height: 110px;
              margin: 0 auto;
            }
          }
        }
      }
    }
  }
}
</style>
